<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="图片轮播，图片切换，焦点图" />
    <meta name="description" content="这是一个基于jquery的图片轮播效果演示页" />
    <title>演示：带缩略图的相册</title>
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <link rel="stylesheet" type="text/css" href="flexslider.css" />
    <style type="text/css">
     .demo {
        width: 800px;
        margin: 20px auto
    }
    </style>
    <script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.flexslider-min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#carousel').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            slideshow: false,
            itemWidth: 200,
            asNavFor: '#slider'
        });

        $('#slider').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel"
        });
    });
    </script>
</head>

<body>
    <div id="main">
        <div class="demo">
            <div id="slider" class="flexslider">
                <ul class="slides">
                    <li><img src="images/sc1.jpg" /></li>
                    <li><img src="images/sc2.jpg" /></li>
                    <li><img src="images/sc3.jpg" /></li>
                    <li><img src="images/sc4.jpg" /></li>
                    <li><img src="images/sc5.jpg" /></li>
                    <li><img src="images/sc6.jpg" /></li>
                    <li><img src="images/sc1.jpg" /></li>
                    <li><img src="images/sc2.jpg" /></li>
                    <li><img src="images/sc3.jpg" /></li>
                    <li><img src="images/sc4.jpg" /></li>
                    <li><img src="images/sc5.jpg" /></li>
                    <li><img src="images/sc6.jpg" /></li>
                </ul>
            </div>
            <div id="carousel" class="flexslider">
                <ul class="slides">
                    <li><img src="images/sc1.jpg" /></li>
                    <li><img src="images/sc2.jpg" /></li>
                    <li><img src="images/sc3.jpg" /></li>
                    <li><img src="images/sc4.jpg" /></li>
                    <li><img src="images/sc5.jpg" /></li>
                    <li><img src="images/sc6.jpg" /></li>
                    <li><img src="images/sc1.jpg" /></li>
                    <li><img src="images/sc2.jpg" /></li>
                    <li><img src="images/sc3.jpg" /></li>
                    <li><img src="images/sc4.jpg" /></li>
                    <li><img src="images/sc5.jpg" /></li>
                    <li><img src="images/sc6.jpg" /></li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
